<template>
    <div class="applist">
        <el-row :gutter="10">
            <el-col :span="6">
                <div class="apply-box">
                    <div class="img">
                        <img src="./images/cs.png" style="width: 100%;" alt="">
                    </div>
                    <div class="img-hover">
                        <img src="./images/cs-hover.png" style="width: 100%;" alt="">
                    </div>
                    <div class="content">
                        <div class="title">
                            <div class="title1">国家超级计算长沙中心</div>
                            <div class="title2">NATIONAL SUPERCOMPUTING CENTER IN CHANGSHA</div>
                        </div>
                        <div class="desc">
                            国家超级计算长沙中心于2010年10月由科技部批准组建，成为继天津和深圳之后获批建设的第三家国家级超级计算中心
                            。2010年11月28日，以“天河一号”为计算设备的国家超级计算长沙中心在湖南大学正式奠基。2014年11月4日正式运营。
                        </div>
                        <div class="btn is-active" @click="createDialog=true">申请资源</div>
                    </div>
                    <div class="hover-bg"></div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="apply-box">
                    <div class="img">
                        <img src="./images/tj.png" style="width: 100%;" alt="">
                    </div>
                    <div class="img-hover">
                        <img src="./images/tj-hover.png" style="width: 100%;" alt="">
                    </div>
                    <div class="content">
                        <div class="title">
                            <div class="title1">国家超级计算天津中心</div>
                            <div class="title2">NATIONAL SUPERCOMPUTING CENTER IN TIANJIN</div>
                        </div>
                        <div class="desc">
                            国家超级计算天津中心是2009年5月批准成立的首家国家级超级计算中心，是我国目前应用范围最广、研发能力最强的超级计算中心,为全国的科研院所、大学、重点企业提供了广泛的高性能计算、云计算、大数据、人工智能等高端信息技术服务。
                        </div>
                        <div class="btn">申请成功</div>
                    </div>
                    <div class="hover-bg"></div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="apply-box">
                    <div class="img">
                        <img src="./images/sz.png" style="width: 100%;" alt="">
                    </div>
                    <div class="img-hover">
                        <img src="./images/sz-hover.png" style="width: 100%;" alt="">
                    </div>
                    <div class="content">
                        <div class="title">
                            <div class="title1">国家超级计算深圳中心</div>
                            <div class="title2">NATIONAL SUPERCOMPUTING CENTER IN SHENZHEN</div>
                        </div>
                        <div class="desc">
                          国家超级计算深圳中心于2009年获国家科技部批准成立，是深圳建市以来规模最大的国家级重大科技创新基础设施。深圳超算服务全国乃至东南亚地区，坚持以技术为引领、以市场为导向、以品质为追求、以服务为根本的方向，打造成为国际化超算中心。
                        </div>
                        <div class="btn">申请中</div>
                    </div>
                    <div class="hover-bg"></div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="apply-box">
                    <div class="img">
                        <img src="./images/sh.png" style="width: 100%;" alt="">
                    </div>
                    <div class="img-hover">
                        <img src="./images/sh-hover.png" style="width: 100%;" alt="">
                    </div>
                    <div class="content">
                        <div class="title">
                            <div class="title1">国家超级计算上海中心</div>
                            <div class="title2">NATIONAL SUPERCOMPUTING CENTER IN SHANGHAI</div>
                        </div>
                        <div class="desc">
                            上海超级计算中心（SSC）成立于2000年12月，是2000年上海市一号工程---上海信息港主体工程之一，由上海市政府投资建设，坐落于浦东张江高科技开发园区内。它是国内第一个面向社会开放，实现资源共享的高性能计算公共服务平台。
                        </div>
                        <div class="btn">申请成功</div>
                    </div>
                    <div class="hover-bg"></div>
                </div>
            </el-col>
        </el-row>
        <transition name="el-fade-in">
          <applyResource v-if="createDialog" @close="createDialog=false"></applyResource>
        </transition>
    </div>
</template>

<script>
  import applyResource from './applyResource'
  export default {
    components: { applyResource },
    data () {
      return {
        createDialog: false
      }
    }
  }
</script>

<style lang="scss" scoped>
.apply-box {
    width: 100%;
    min-width: 340px;
    margin: 0 auto;
    height: 400px;
    background: url(./images/borderbg.png) no-repeat;
    background-size: 100% 100%;
    // border-image: linear-gradient(180deg, #ffffff, #c1b0ff 100%) 1 1;
    position: relative;
    cursor: pointer;
    &:hover {
        color: #ffffff;
        .desc {
            padding: 30px 40px;
            color: #ffffff;
        }
        .img {
          display: none;
        }
        .img-hover {
          display: block;
        }
        .title::after {
          background: url(./images/line-active.png) no-repeat;
        }
        .hover-bg {
          display: block;
        }
    }
    &.cs {
        // background: url(./images/csbg.png) no-repeat bottom center;
        background-size: 100%;
    }
    .title {
        text-align: center;
        position: relative;
        .title1 {
            font-size: 24px;
            line-height: 1;
        }
        .title2 {
            font-size: 12px;
            transform: scale(0.8);
        }
        &::after {
            position: absolute;
            content: ' ';
            width: 160px;
            height: 1px;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: url(./images/line.png) no-repeat;
        }
    }
    .desc {
        padding: 30px 40px;
        color: #999999;
        text-align: justify;
        font-weight: 300;
        line-height: 22px;
        height: 180px;
    }
    .btn {
        display: block;
        margin: 0 40px;
        height: 40px;
        background: #ffffff;
        border: 1px solid rgba(51, 49, 126, 0.5);
        border-radius: 4px;
        text-align: center;
        font-size: 18px;
        color: #33317e;
        &.is-active {
            background: linear-gradient(270deg, #33317e, #5a58c5);
            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
            border: none;
            color: #ffffff;
        }
    }
    .img {
        position: absolute;
        width: 100%;
        min-width: 340px;
        padding:0 2px;
        top: -80px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 0;
        overflow: hidden;
    }
    .img-hover {
        display: none;
        position: absolute;
        width: 100%;
        min-width: 340px;
        padding:0 2px;
        top: -80px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        overflow: hidden;
    }
    .content {
        position: absolute;
        z-index: 10;
        top: 50%;
        padding-top: 50px;
        transform: translateY(-50%);
    }
    .hover-bg {
         display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 400px;
        background: url(./images/hover.png) no-repeat center;
        background-size: 100% 100%;
        // box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
        z-index: 1;
    }
}
</style>
